<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" template="../templates/Myui.xhtml">
	<ui:define name="head">
	</ui:define>


	<ui:define name="customStyle">
		<style type="text/css">
.testreg {
	vertical-align: top;
}

.setWidth {
	width: 155px;
}

.picturePreview {
	width: 210px;
	height: 200px;
	text-align: center;
	vertical-align: middle;
}

.uploadify-button {
	background-color: transparent;
	border: none;
	padding: 0;
}

.uploadify:hover .uploadify-button {
	background-color: transparent;
}

div #picText {
	background: #333;
	color: white;
	display: none;
}

TABLE#headshot:hover #picText {
	display: block;
}

/**for text show **/
.alpha1,.alpha2 {
	width: 100%;
	height: auto;
	min-height: 25px; /* 必需 */
	_height: 25px; /* 必需 */
	overflow: hidden;
	background-color: #7CAEFB; /* 背景色 */
}

.alpha1 {
	filter: alpha(opacity =         70); /* IE 透明度20% */
	opacity: 0.7;
}

.alpha2 {
	-moz-opacity: 0.7; /* Moz FF 透明度20%*/
	opacity: 0.7; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/
}

.ap2 {
	position: absolute;
}
</style>
	</ui:define>



	<ui:define name="content">
		<script type="text/javascript"
			src="#{request.contextPath}/js/ddaccordion.js" />


		<script type="text/javascript">  

		ddaccordion.init({
			headerclass: "expandable", //Shared CSS class name of headers group that are expandable
			contentclass: "categoryitems", //Shared CSS class name of contents group
			revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
			mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
			collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
			defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
			onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
			animatedefault: false, //Should contents open by default be animated into view?
			persiststate: true, //persist state of opened contents within browser session?
			toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
			togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
			animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
			oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
				//do nothing
			},
			onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
				//do nothing
			}
		})
</script>
		<div id="dataPage">
			<div>
				<div
					style="float: left; padding-left: 64px; color: rgb(221, 75, 57); font-size: 20px; font-family: Arial, sans-serif;">Accounts</div>
			</div>
			<BR /> <BR />
			<DIV style="border-bottom: 1px solid rgb(235, 235, 235);"></DIV>
			<br />
			<div
				style="float: left; width: 244px; font-family: Arial, sans-serif; font-size: 13px; border-right: 1px solid rgb(235, 235, 235); height: 620px">


				<div class="arrowlistmenu">
					<h3 class="menuheader expandable">Account</h3>
					<ul class="categoryitems">
						<li><a href="#">Account Activity</a></li>
						<li><a href="#">Dashboard</a></li>
						<li><a href="#">Download your data</a></li>
						<li><a href="#">Me on the web</a></li>
					</ul>
					<h3 class="menuheader expandable">Security</h3>
					<ul class="categoryitems">
						<li><a href="#">Recent Activity</a></li>
					</ul>
					<h3 class="menuheader" style="cursor: default">Profile and
						privacy</h3>
					<h3 class="menuheader" style="cursor: default">Google+</h3>
					<h3 class="menuheader" style="cursor: default">Products</h3>
				</div>
			</div>
			<DIV style="margin-left: 244px;">
				<h:form id="Form" prependId="false"
					style="width:95% ;text-align:left;">
					<p:panel>
						<h:panelGrid columns="2" columnClasses=",testreg">
							<h:panelGrid id="editGrid"
								style="text-align: left; margin: 25px 10px 40px;width:425px;border-right: 1px solid rgb(235, 235, 235);"
								cellspacing="8" columns="2" columnClasses="setWidth,">

								<h:outputText value="diaplay Name:"></h:outputText>
								<p:inputText value="#{loginBean.user.username}"></p:inputText>

								<h:outputText value="Email:"></h:outputText>
								<p:inputText value="#{loginBean.user.email}"></p:inputText>

								<h:outputText value="First Name:"></h:outputText>
								<p:inputText value="#{loginBean.user.firstName}"></p:inputText>

								<h:outputText value="Last Name:"></h:outputText>
								<p:inputText value="#{loginBean.user.lastName}"></p:inputText>

								<h:outputText value="Password:" />
								<p:password value="#{loginBean.user.password}"></p:password>

								<h:outputText value="Birthday" />
								<p:calendar value="#{loginBean.user.dob}" id="popupButtonCal">
									<f:convertDateTime pattern="d/M/yyyy" />
								</p:calendar>

								<h:outputText value="Gender:" />
								<p:selectOneMenu value="#{loginBean.user.gender}"
									style="width:135px;text-align:left;" title="select your gender"
									id="gender">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="Male" itemValue="M" />
									<f:selectItem itemLabel="Female" itemValue="F" />
									<f:validateLength minimum="1" />
								</p:selectOneMenu>

								<h:outputText value="secret question:" />
								<p:selectOneMenu value="#{loginBean.user.secretQuestion}"
									style="width:135px;text-align:left;"
									title="select your question" id="question">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="which place you like best?"
										itemValue="which place you like best?" />
									<f:selectItem itemLabel="What's my family name ?"
										itemValue="What's my family name ?" />
									<f:selectItem itemLabel="What's my dog name ?"
										itemValue="What's my dog name ?" />
								</p:selectOneMenu>

								<h:outputText value="secret Answer:" />
								<p:inputText id="answer" value="#{loginBean.user.secretAnswer}">
								</p:inputText>

								<h:outputText value="your interests:" />
								<p:selectOneMenu value="#{loginBean.user.custInterests}"
									style="width:135px;text-align:left;"
									title="select your interests" id="interests">
									<f:selectItem itemLabel="Select" itemValue="" />
									<f:selectItem itemLabel="Book" itemValue="book" />
									<f:selectItem itemLabel="travel" itemValue="travel" />
									<f:selectItem itemLabel="Tech" itemValue="tech" />
								</p:selectOneMenu>


							</h:panelGrid>
							<h:panelGrid id="headshot">
								<div style="margin-top: 20px;" id="showPic">
									<p:graphicImage value="#{loginBean.user.image}"
										id="editHeadshot" style="width: 100%;" alt=" " cache="false">
										<f:param value="#{now.time}"></f:param>
									</p:graphicImage>
									<!-- text display float the image -->
									<!--Fixed bakgroud  opacity
									<div
										style="text-align: center; margin-top: -43px; position: relative;"
										id="picText"> -->
									<div style="text-align: center; margin-top: -43px;"
										id="picText">
										<div class="alpha1">
											<div class="ap2"></div>
											<!--[if IE]><![if !IE]><![endif]-->
											<div class="alpha2"></div>
											<!--[if IE]><![endif]><![endif]-->
										</div>
										<p
											style="text-align: center; margin-top: -19px; position: relative; color: white;">Change
											the photo</p>
									</div>
								</div>
							</h:panelGrid>
						</h:panelGrid>


					</p:panel>
				</h:form>
			</DIV>
		</div>
	</ui:define>
</ui:composition>